<template>
  <div class="review-config-step">
    <h3>请确认您的配置</h3>
    
    <div class="config-sections" v-if="hasValidConfig">
      <!-- 滤波器配置概览 -->
      <div class="config-section">
        <h4>滤波器配置</h4>
        <div class="config-details" v-if="filterConfig">
          <div class="detail-row">
            <span class="detail-label">滤波器类型:</span>
            <span>{{ filterConfig.filterType || '未设置' }}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">原型:</span>
            <span>{{ filterConfig.prototype || '未设置' }}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">阶次:</span>
            <span>{{ filterConfig.order || '未设置' }}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">频率参数:</span>
            <span v-if="filterConfig.filterType === 'lowpass' || filterConfig.filterType === 'highpass'">
              Fc: {{ filterConfig.fc1 || '未设置' }} Hz
            </span>
            <span v-else>
              Fc1: {{ filterConfig.fc1 || '未设置' }} Hz, Fc2: {{ filterConfig.fc2 || '未设置' }} Hz
            </span>
          </div>
          <!-- <div class="detail-row">
            <span class="detail-label">输出名称:</span>
            <span>{{ filterConfig.filterName || '未设置' }}</span>
          </div> -->
        </div>
      </div>
      
      <!-- 计算参数配置概览 -->
      <div class="config-section">
        <h4>计算参数配置</h4>
        <div class="config-details" v-if="calculationConfig">
          <!-- <div class="detail-row">
            <span class="detail-label">输入通道:</span>
            <span>{{ calculationConfig.inputChannel || '未设置' }}</span>
          </div> -->
          <div class="detail-row">
            <span class="detail-label">计算类型:</span>
            <span>{{ getCalcTypeLabel(calculationConfig.calcType1) || '未设置' }} - {{ getCalcTypeLabel(calculationConfig.calcType2) || '未设置' }}</span>
          </div>
          
          <template v-if="calculationConfig.calcType1 === 'block'">
            <div class="detail-row">
              <span class="detail-label">块大小:</span>
              <span>{{ calculationConfig.blockSize || '未设置' }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">重叠设置:</span>
              <span v-if="calculationConfig.overlapType === 'percent'">
                {{ calculationConfig.overlapValue || '未设置' }}%
              </span>
              <span v-else>
                {{ calculationConfig.overlapValue || '未设置' }} (绝对值)
              </span>
            </div>
          </template>
          
          <div class="detail-row">
            <span class="detail-label">输出参数:</span>
            <span>{{ calculationConfig.outputParams.length > 0 ? calculationConfig.outputParams.join(', ') : '未设置' }}</span>
          </div>
          <!-- <div class="detail-row">
            <span class="detail-label">输出名称:</span>
            <span>{{ calculationConfig.outputName || '未设置' }}</span>
          </div> -->
        </div>
      </div>
      <!-- FFT配置概览 -->
    </div>
    
    <!-- 加载状态提示 -->
    <div class="loading-state" v-else>
      <div class="loading-icon">加载中...</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { FilterConfig, CalculationConfig, FFTSettings } from '@/apis/task/dataAnalysis'
import { 
  CALC_TYPE1_OPTIONS,
  CALC_TYPE2_OPTIONS
} from '@/apis/task/dataAnalysis'

const props = defineProps({
  filterConfig: {
    type: Object as () => FilterConfig | null,
    required: true
  },
  calculationConfig: {
    type: Object as () => CalculationConfig | null,
    required: true
  },
  // fftConfig: {
  //   type: Object as () => FFTSettings | null,
  //   required: true
  // }
})

// 检查是否有有效配置
const hasValidConfig = computed(() => {
  return props.filterConfig !== null && props.calculationConfig !== null
        //  props.fftConfig !== null
})

// 获取计算类型标签
const getCalcTypeLabel = (value: string) => {
  // 查找参数集一的标签
  const type1Option = CALC_TYPE1_OPTIONS.find(opt => opt.value === value)
  if (type1Option) return type1Option.label
  
  // 查找参数集二的标签
  const type2Option = CALC_TYPE2_OPTIONS.find(opt => opt.value === value)
  if (type2Option) return type2Option.label
  
  return value
}

// 获取分辨率显示文本
const getResolutionDisplay = (fftConfig: FFTSettings) => {
  if (fftConfig.selectedParamType === 'lines') {
    return `${fftConfig.selectedLines} 线 (Δf=${fftConfig.selectedDf} Hz, 时长=${fftConfig.selectedDuration}s)`
  } else if (fftConfig.selectedParamType === 'df') {
    return `Δf=${fftConfig.selectedDf} Hz (${fftConfig.selectedLines} 线, 时长=${fftConfig.selectedDuration}s)`
  } else {
    return `时长=${fftConfig.selectedDuration}s (${fftConfig.selectedLines} 线, Δf=${fftConfig.selectedDf} Hz)`
  }
}

// 获取频率类型标签
const getFrequencyTypeLabel = (type: string) => {
  const typeMap: Record<string, string> = {
    'spectrum': '频谱',
    'rpm': 'RPM',
    'order': '阶次'
  }
  return typeMap[type] || type
}
</script>

<style scoped>
.review-config-step {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

h3 {
  margin-bottom: 20px;
  text-align: center;
}

.config-sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.config-section {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
  background-color: #f9f9f9;
}

.fft-section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
}

.sub-section {
  border-left: 2px solid #eee;
  padding-left: 10px;
}

h4 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

h5 {
  margin: 10px 0;
  color: #555;
  font-size: 14px;
}

.config-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-row {
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 1.5;
}

.detail-label {
  font-weight: bold;
  min-width: 120px;
  color: #666;
}

.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #666;
}

.loading-icon {
  font-size: 18px;
}

@media (max-width: 1200px) {
  .fft-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .config-sections {
    grid-template-columns: 1fr;
  }
  
  .detail-row {
    flex-direction: column;
    gap: 2px;
  }
  
  .detail-label {
    min-width: auto;
  }
}
</style>